// docs/.vitepress/theme/index.ts
import DefaultTheme from "vitepress/theme";
import "katex/dist/katex.min.css"; // ✅ 放这里没问题
import { initComponent } from "vitepress-plugin-legend/component";
import "vitepress-plugin-legend/dist/index.css";
import "./custom.css";
import MyCustomComponent from "../../components/MyCustomComponent.vue";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

// 需要引入 Vuetify 样式
import "vuetify/styles";
import "@mdi/font/css/materialdesignicons.css"; // 图标字体

const vuetify = createVuetify({
  components,
  directives,
});

let switching = false; 

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component("MyCustomComponent", MyCustomComponent);
    initComponent(app);
    app.use(vuetify);

    app.provide("before-appearance-switch", async () => {
      console.log("before-appearance-switch");
      if (switching) return false;
      switching = true;
      const html = document.documentElement;
      const nextDark = !html.classList.contains("dark");
      html.classList.toggle("dark", nextDark);
      setTimeout(() => {
        localStorage.setItem("user-color-scheme", nextDark ? "dark" : "light");
      }, 800);
      await new Promise((resolve) => setTimeout(resolve, 800));
      switching = false;
      return true;
    });
  },
};
